<template>
  <a-form-model-item :prop="required ? prop : ''">
    <!-- 预览模式描述 -->
    <span v-if="options.pattern == 2 && options.disabled == true">
      {{ options.explain }}
    </span>
    <a-time-picker
      v-else-if="options.pattern == 1 || ([2, 3].includes(options.pattern) && options.disabled == false)"
      v-model="myValue"
      :style="`width: ${options.width}; word-wrap:break-word;`"
      @change="helpChange"
      @click="helpClick"
      :format="options.format"
      :disabled="options.disabled"
      :allowClear="options.clearable"
    >
      <a-icon v-if="options.icon" slot="suffixIcon" :type="options.icon" />
    </a-time-picker>
    <div
      v-else
      :class="{ formMaringBox: true, beyond_hiding: index == undefined ? false : true }"
      :style="`width: ${options.width}; word-wrap:break-word;`"
    >
      <a-tooltip placement="topLeft">
        <template slot="title">
          <span>{{ myValue }}</span>
        </template>
        <span
          class="copy_text"
          @click="copyClick()"
          @mouseenter="
            () => {
              isCopy = true
            }
          "
          @mouseleave="
            () => {
              isCopy = false
            }
          "
        >
          {{ myValue }}
        </span>
      </a-tooltip>
    </div>
  </a-form-model-item>
</template>

<script>
import moment from 'moment'
import { copyValue } from '@/utils/formassembly/util.js'
export default {
  props: {
    required: {
      type: Boolean,
      default: true,
    },
    label: {
      type: String,
    },
    span: {
      type: Number,
      default: 19,
    },
    prop: {
      type: String,
    },
    type: {
      type: String,
      default: 'table',
    },
    // 子表单用到
    index: {
      type: Number,
    },
    value: {},
    // 属性配置参数
    options: {
      type: Object,
      default() {
        return {}
      },
    },
    // 布局配置参数
    config: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  watch: {
    value(val) {
      // console.log('时间变更', val)
      this.myValue = moment(val).format(this.options.format)
    },
  },
  data() {
    return {
      myValue: this.value ? moment(this.value).format(this.options.format) : null,
      isCopy: false, // 复制标签显示
    }
  },
  methods: {
    // 鼠标点击复制内容
    copyClick() {
      if (copyValue(this.myValue)) {
        this.$message.success('复制成功')
      } else {
        this.$message.error('复制失败')
      }
    },
    helpChange(moment, dateValue) {
      // 这里存的是时间
      this.$listeners.updatedValueF(this.prop, moment.format(this.options.format), this.index)
      if (this.options.change) {
        this.$listeners.fHelp(this.options.change, this.index)
      }
    },
    helpClick() {
      if (this.options.click) {
        this.$listeners.fHelp(this.options.click, this.index)
      }
    },
  },
}
</script>

